<!DOCTYPE HTML>
<html xmlns:th="http://www.thymeleaf.org">

<head th:include="heard :: head"></head>
<body>
<nav th:replace="heard :: nav"></nav>
<div class="container-fluid" style="font-size: 14px;">
    <div class="row ">
        <input id="pid" style="display:none" th:value="${pid}">
        <table id="valueTable" class="table table-sm "></table>
    </div>
</div>

</div>

</body>
<script>
    $(function () {
        initValueTable();
    })

    function initValueTable() {
        let pid = $("#pid").val();
        $.getJSON("/parameter/definition/" + pid, function (data) {
            const columns = [{
                field: 'code',
                title: "code",
            }, {
                field: 'name',
                title: "name",
            },];
            $.each(data, function (i, item) {
                const obj = {};
                obj.field = item.name;
                obj.title = item.name;
                columns.push(obj);
            });

            console.log(columns);
            let $valueTable = $('#valueTable');
            $valueTable.bootstrapTable('destroy');
            $valueTable.bootstrapTable({
                url: "/parameter/value/page",
                method: 'GET',
                dataType: "json",//数据类型
                sidePagination: "server",
                pagination: true,
                columns: columns,
                pageNumber: 1,
                pageList: [5],
                cardVisible: true,
                /*            showToggle: true,*/
                cardView: true,
                /* cellStyle: function (value, row, index) {
                     return {
                         css: {
                             "min-width": "10%",
                             "max-width": "10%",
                             /!* "white-space": "nowrap",
                              "text-overflow": "ellipsis",
                              "overflow": "hidden",
                              "max-width": "200px"*!/
                         }
                     }
                 },*/
                queryParams: function (params) {
                    var temp = {
                        pageSize: params.limit,
                        pageNumber: (params.offset / params.limit) + 1,
                        pid: pid
                    };
                    return temp;
                },
                responseHandler: function (res) {
                    return {
                        "total": res.page,
                        "rows": res.data
                    }
                },
            })
        });

    }


</script>
</html>
